/*
 * @Title: 美食小吃-首页
 * @Created by: ycq
 */
<template>
	<view :class="showMask?'food':''" style="background: #F6F6F6;">
		<IndexHead :config='pageConfig' :bgImg='bannerBgImage' :rightIcoHandle='toSearch'></IndexHead>
		<view style="width: 100%;height: 240upx;position: relative;">
			<view class="swiper-box">
				<swiper  v-if="foodData.length>1" class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"   @change="menuChange">
					<swiper-item v-for="(pageItem,index) in foodData" :key='index'>
						<view class="swiper-item" >
							<view class="head-menu-area">
								<view class="head-menu-item" v-for="nav in pageItem.data" :key='nav.name' @click="navClick(nav.url)">
									<view class="head-menu-img">
										<image :src='nav.img' mode="aspectFit"></image>
									</view>
									<text>{{nav.name}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dot-main">
					<!-- #ifdef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='foodData.length > 1' v-for="(item,index) in foodData" :key="index"></view>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS|| MP-WEIXIN -->
					<view :class="['dot-item',current==index?'active':'']" v-if='foodData.length > 1' v-for="(item,index) in foodData" :key="index"></view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="typeBar">
			<HomeType :pageId='3' ></HomeType>
		</view>
		<!-- <ShouyeOrder :pageType='3' ref='shouyeOrder' style='margin-top: 240upx;'/> -->
		<view class="food-list" >
			<view class="mask" v-if="showMask" @touchmove.stop.prevent @click='closeMask'></view>
			<view class="food-area">
				<view class="food-item" v-for='(item,inedx) in likeData' :key='inedx' @click="toDetail">
					<image :src="item.img" mode="aspectFill"></image>
					<text class="food-name">{{item.name}}</text>
					<view class="food-fp">
						<text class="food-fen">{{item.fen}} <text class="fen">分</text></text>
						<text class="food-pl">{{item.pl}}评论</text>
					</view>
					<text class="food-tip">{{item.add}}|{{item.tip}}</text>
					<text class="food-far">{{item.far}}km</text>
				</view>
			</view>
		</view>
		<top-view></top-view>
		<view style="height: 19vw;"></view>
		<FootMenu />
	</view>
</template>

<script>
	import FootMenu from '@/components/footMenu.vue'
	import ShouyeOrder from '@/components/shoyeOrder.vue'
	import HomeType from '@/components/HomeType.vue'
	export default{
		data(){
			return{
				showMask:false,
				current:0,
				bannerBgImage:['/static/banner.png','/static/banner.png','/static/banner.png','/static/banner.png'],
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						showHeadBg:false,
						headHeight:350,
						hasMenu:false,
						pageId:'meishi',
					},
					left:{
						// img:'/static/pos-home.png' , //左侧图标
						// text:'沈阳市', //左侧文字
					},
					mid:{
						title:'美食小吃' ,//页面title
						hasSearchMid:false ,//显示中间搜索框
						showAddIcon:true, //是否显示右侧icon
						rightIco:'/static/fdj-head.png'//右侧图标地址
					},
					
				},
				foodData:[  // 首页-美食
					{data:[
						{name:'排队取号',img:'/static/pdqh.png',url:''},
						{name:'预订座位',img:'/static/ydzw.png',url:''},
						{name:'晚餐',img:'/static/wc.png',url:''},
						{name:'火锅',img:'/static/hg.png',url:''},
						{name:'蛋糕奶茶',img:'/static/ncdg.png',url:''},
						{name:'小吃快餐',img:'/static/xckc.png',url:''},
						{name:'烧烤烤肉',img:'/static/skkr.png',url:''},
						{name:'特色美食',img:'/static/tsms.png',url:''},
						{name:'家常小炒',img:'/static/jcxc.png',url:''},
						{name:'日韩料理',img:'/static/rhll.png',url:''},
						],
					},
					{data:[
						{name:'排队取号',img:'/static/pdqh.png',url:''},
						{name:'预订座位',img:'/static/ydzw.png',url:''},
						{name:'晚餐',img:'/static/wc.png',url:''},
						{name:'火锅',img:'/static/hg.png',url:''},
						{name:'蛋糕奶茶',img:'/static/ncdg.png',url:''},
						{name:'小吃快餐',img:'/static/xckc.png',url:''},
						{name:'烧烤烤肉',img:'/static/skkr.png',url:''},
						{name:'特色美食',img:'/static/tsms.png',url:''},
						{name:'家常小炒',img:'/static/jcxc.png',url:''},
						
						],
					},	
				],
				likeData:[
					{
						name:'新韩小馆烤肉',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'糖果奶茶店',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'美美四川火锅',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'胡忠串串香',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'新韩小馆烤肉',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'糖果奶茶店',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'美美四川火锅',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'胡忠串串香',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'新韩小馆烤肉',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'糖果奶茶店',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'美美四川火锅',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'胡忠串串香',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					}
				]
			}
		},
		components:{
			FootMenu,
			ShouyeOrder,
			HomeType
		},
		methods:{
			toSearch(){
				uni.navigateTo({
					url:'/pages/home/shearchView'
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'foodDetail'
				})
			},
			showMasker(){
				this.showMask = true
				
			},
			closeMask(){
				this.showMask = false
				this.$refs.shouyeOrder.openZHPX=false
				this.$refs.shouyeOrder.showFS = false
			},
			menuChange(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style scoped>
	body{
		background: #F6F6F6;
	}
	.typeBar{
		position: sticky;
		top: calc(80upx + var(--status-bar-height));
		width: 100%;
		height: auto;
		z-index: 20;
		box-shadow: 0 -1px #fff;
		/* border-top: rgba(246,246,246,1.00) solid 15upx ; */
		/* padding-top: 24upx; */
	}
	.food{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.food-list{
		width: 100%;
		height: auto;
		display: table;
		margin-top: 30upx;
		background: #F6F6F6;
	}
	.mask{
		width: 100%;
		position: absolute;
		height: 100%;
		z-index: 5;
		background: rgba(0,0,0,0.5);
	}
	.food-area{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
	.food-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.food-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	
	.food-item:nth-child(1),.food-item:last-child{
		height: 413upx;
	}
	.food-item:nth-child(1) image,.food-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 270upx; 
	}
	.food-item{
		height: 479upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.food-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height:336upx;
		
	}
	.food-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	
	.food-tip{
		width: 200upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: left;
		font-size: 26upx;
		display: block;
	}
	.food-pl{
		width: 143upx;
		font-size: 25upx;;
		color: #999999;
		height: 50upx;
		line-height: 54upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
		overflow: hidden;
		float: left;
	}
	.food-fen{
		width: 90upx;
		display: block;
		height: 50upx;
		line-height: 50upx;
		text-align: left;
		float: left;
		font-size: 30upx;
		color:#DD540A;
	}
	.food-fp{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		height: 50upx;
	}
	.food-fen .fen{
		font-size: 25upx;
	}
	.food-far{
		width: 90upx;
		margin-left: 24upx;
		height: 40upx;
		/* margin-top: 20upx; */
		color: #999999;
		float: right;
		font-size: 26upx;
		display: block;
	}
	.swiper-box{
		width: 700upx;
		height: 270upx;
		left: 25upx;
		right: 25upx;
		border-radius: 20upx;
		margin-top: -40upx;
		position: absolute;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(220,220,220,1);
	}
	.swiper{
		height: 100%;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	.head-menu-area{
		width: 700upx;
		height: 98upx;
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}
	.head-menu-item{
		width: 140upx;
		height: 80upx;
		/* padding: 15upx 0; */
		margin-top: 30upx;
		text-align: center;
	}
	.head-menu-img{
		width: 100%;
		height: 50upx;
	}
	.head-menu-item image{
		width: 44upx;
		height: 42upx;
	}
	.head-menu-item text{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 24upx;
	}
	.dot-main {
		width: 100%;
		height: 38upx;
		display: flex;
		top: 230upx;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 30upx;
		height: 8upx;
		border-radius: 30upx;
		background: rgba(0,0,0,0.2);
		margin: 0 0upx;
		box-sizing: border-box;
	}
	.active {
		background: #55A0FF;
	}
</style>
